<template>
	<view class="house">
	<!-- 404页面 -->
	<view v-if="!formData.title && !loading">
		<rf-no-data :custom="true">
			<view class="no-data-title">
				{{ errorInfo || '暂无数据' }}
			</view>
			
		</rf-no-data>
	</view>
	
	<view   class="container" v-if="formData.title">
	
	<!--顶部轮播图-->
	<view class="carousel">
		<swiper indicator-dots circular="true" duration="400" controls touchable  >
			<swiper-item class="swiper-item" v-for="(item, index) in imagesArr" :key="index" @click="previewImg(item,imagesArr)">
				<view class="image-wrapper">
					<image :src="item" class="loaded" mode="aspectFill"></image>
				</view>
				<uni-tag class="content" circle size="small" :text="index+1+` / `+imagesArr.length"></uni-tag>
			</swiper-item>
		</swiper>
	</view>
<!--基本信息-->
		<view class="handdatail-info" v-if="formData.title">
		    <view class="handdatail-info-name" >
			     <view class="handdatail-info-name-title f_left ">{{ formData.title }}</view>
			     <view class="add_block f_right"></view>
		    </view>
		
		    <view class="handdatail-info-other clearfloat" >
			    <view  class="handdatail-info-other-a f_left skeleton-rect">
			         <view  class="handdatail-info-other-a-top" :style="{ color: themeColor.color }">{{ formData.price }}</view>
			         <view  class="handdatail-info-other-a-bottom">售价</view>
			   </view>
			   <view  class="handdatail-info-other-a f_left skeleton-rect">
			         <view  class="handdatail-info-other-a-top" :style="{ color: themeColor.color }">{{ formData.room }}室{{ formData.hall }}厅<!----></view>
				     <view  class="handdatail-info-other-a-bottom">房型</view>
				</view>
			   <view  class="handdatail-info-other-a f_left skeleton-rect">
				    <view  class="handdatail-info-other-a-top" :style="{ color: themeColor.color }">{{ formData.houseearm }}m²</view>
				    <view  class="handdatail-info-other-a-bottom">面积</view>
			   </view>
		    </view>
		    <view  class="handdatail-info-more-a f_left clearfloat">
		         <view  class="handdatail-info-more-a-left f_left">单价:</view>
		         <view  class="handdatail-info-more-a-right f_left">{{ formData.average_price }}元/m²</view>
		    </view>
		    <view  class="handdatail-info-more-a f_left clearfloat">
		         <view  class="handdatail-info-more-a-left f_left">装修:</view>
				 <view  class="handdatail-info-more-a-right f_left">{{ formData.renovation }}</view>
		    </view>
		    <view  class="handdatail-info-more-a f_left clearfloat">
		         <view  class="handdatail-info-more-a-left f_left">楼层:</view>
				 <view  class="handdatail-info-more-a-right f_left">{{ formData.floor1 }}(共{{ formData.floor2 }}层)</view>
			</view>
			
				<view  class="">
			<view  class="handdatail-info-more-a f_left clearfloat">
				<view  class="handdatail-info-more-a-left f_left">面积:</view>
				<view  class="handdatail-info-more-a-right f_left">{{ formData.houseearm }}m²</view>
			</view>
			
			<view  class="handdatail-info-more-a f_left clearfloat">
				<view  class="handdatail-info-more-a-left f_left">类型:</view>
				<view  class="handdatail-info-more-a-right f_left">{{ formData.catname }}</view>
			</view>
			<view  class="handdatail-info-more-a f_left clearfloat">
				<view  class="handdatail-info-more-a-left f_left" style="width: 75px;">房屋年限:</view>
				<view  class="handdatail-info-more-a-right f_left">{{ formData.year }}</view>
			</view>
			<view  class="handdatail-info-more-a f_left clearfloat">
				<view  class="handdatail-info-more-a-left f_left">地区:</view>
				<view  class="handdatail-info-more-a-right f_left">{{ formData.areaname }}</view>
			</view>
		
			
			<view  class="handdatail-info-more-a f_left clearfloat">
				<view  class="handdatail-info-more-a-left f_left">类型:</view>
				<view  class="handdatail-info-more-a-right f_left">{{ formData.catname }}</view>
				</view>
			<view  class="handdatail-info-more-a f_left clearfloat">
				<view  class="handdatail-info-more-a-left f_left">朝向:</view>
				<view  class="handdatail-info-more-a-right f_left">{{ formData.orientations }}</view>
				</view>
			<view  class="handdatail-info-more-a f_left clearfloat">
				<view  class="handdatail-info-more-a-left f_left" style="width: 75px;">发布日期:</view>
				<view  class="handdatail-info-more-a-right f_left">{{ formData.create_time }}</view>
			</view>
			<view  class="handdatail-info-more-a f_left clearfloat">
				<view  class="handdatail-info-more-a-left f_left" style="width: 60px;">浏览量:</view>
				<view  class="handdatail-info-more-a-right f_left">{{ formData.hits }}</view>
			</view>
			<view  class="handdatail-info-more-a f_left clearfloat">
				<view  class="handdatail-info-more-a-left f_left" style="width: 75px;">房龄:</view>
				<view  class="handdatail-info-more-a-right f_left">{{ formData.houseyear }}</view>
			</view>
			</view>
			<view  class="handdatail-info-more-a f_left clearfloat" style="width: 335px;">
				<view  class="handdatail-info-more-a-left f_left" style="width: 75px;">房源编号:</view>
				<view  class="handdatail-info-more-a-right f_left" style="width: 260px; text-align: left;">{{ formData.itemid }}</view>
			</view>
			<view  class="handdatail-info-more-a f_left clearfloat" style="width: 335px;">
				<view  class="handdatail-info-more-a-left f_left">小区:</view>
				<view  class="handdatail-info-more-a-right f_left" style="width: 290px; text-align: left;">{{ formData.housename }}</view>
			</view>
		
				<navigator :url="'/pages/xiaoqu/detail?id=' + formData.houseid" >
			<view   style="width: 335px; color: rgb(92, 144, 210); font-size: 14px; margin: 20px auto; text-align: center;">查看更多小区信息</view>
			</navigator>
		

		</view>
		
		
		
		
		<view class="block_view margin_t20 "></view>
		<!--经纪人-->
		
		<view  class="handdatail-manager " v-if="formData.username">
			<view   class="sheen-title skeleton">
				<view  class="sheen-title clearfloat">
				<view  class="sheen-title-left f_left ">房源经纪人</view>
				<view  class="sheen-title-right f_right">
					</view></view></view>
					<view  class="handdatail-manager-card">
						<navigator :url="'/pages/company/detail?id=' + formData.userid" >
					<view  class="handdatail-manager-card-top clearfloat">
					    <image :src="formData.large" class="handdatail-manager-card-top-a f_left" mode="aspectFill"></image>
					    <view  class="handdatail-manager-card-top-b f_left">
						    <view  class="handdatail-manager-card-top-bt">{{ formData.truename }}</view>
					        <view  class="handdatail-manager-card-bottom">我是该房源经纪人，熟悉本房及小区详细情况</view>
					    </view>
					</view>
						</navigator>
					</view></view>
		<view class="block_view margin_t20 "></view>
		<!--房源特色-->
		
<view  class="handdatail-manager"><view   class="sheen-title skeleton"><view  class="sheen-title clearfloat"><view  class="sheen-title-left f_left">房源概况</view>
<view  class="sheen-title-center f_right"></view></view></view>
<view  class="handdatail-manager-card"><view  class="goodCore"><view  class="coreTxt">{{ formData.peitao }}</view></view><!----><!---->
<view  class="goodCore"><view  class="coreTit">房源描述</view><view  class="coreTxt"><rf-parser :html="formData.info" lazy-load></rf-parser>   </view></view>
<view  class="margin_auto diy-btn bid-btn" @click="clickBtn()"  :style="{ background: themeColor.bgcolor,color: themeColor.color }">预约看房</view></view></view>
		<view class="block_view margin_t20 "></view>
		<!--地图周边-->
		<view  class="handdatail-manager ">
		   <view  class="list-header">
		       <view   class="sheen-title skeleton">
		         <view  class="sheen-title clearfloat">
		           <view  class="sheen-title-left f_left ">位置及周边</view>
		           <view  class="sheen-title-right f_right"></view>
		          
		         </view>
		       </view>
		   </view>
		<view  class="newhousedetails-nearconfig-address  " style="margin: 15px 0px;">地址：{{ formData.address}}</view>
		
		
		<map v-if="showMap" class="map" id="map1" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude"
				 :latitude="location.latitude" :show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew"
				 :show-compass="showCompass" :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom"
				 :enable-scroll="enableScroll" :enable-rotate="enableRotate" :enable-satellite="enableSatellite"
				 :enable-traffic="enableTraffic" :markers="markers" :polyline="polyline" :circles="circles" :polygons="polygons"
				 :include-points="includePoints"></map>
			 
		   <view   @tap="openLocation"  title="点击查看地图" class="margin_auto diy-btn skeleton-rect margin_auto-map" style="margin: 15px 0px;" :style="{ background: themeColor.bgcolor,color: themeColor.color }">点击查看地图</view>
		   
		</view>
		<view class="block_view margin_t20 "></view>
		<!--推荐房源-->
		
		
		   <!--菜单栏start-->
		<view  class="handdatail-manager ">
		   <view  class="list-header">
		       <view   class="sheen-title skeleton">
		         <view  class="sheen-title clearfloat">
		           <view  class="sheen-title-left f_left ">推荐房源</view>
		           <view  class="sheen-title-right f_right"></view>
		          <navigator :url="'/pages/sale/list'" > <view  class="sheen-title-center f_right ">查看更多</view></navigator>
		         </view>
		       </view>
		   </view>
		    <!--菜单栏end-->
		<!--推荐房源列表-->
		<sale :list="saleList" />
		
		<!--推荐房源end-->
		</view>
		<!--我要卖房start-->
		<view class="block_view margin_t20 "></view>
		
		   <view  class="sell-house handdatail-builtinfo">
		      <view  class="sell-house-title">想要卖房？我们可以帮到您</view>
		      <view  class="sell-house-msg">急速卖房，帮您最快成交</view>
		      <text  class="sell-house-btn"  :style="{color: themeColor.color }"    @tap.stop="navTo('/pages/user/sale/add')">我要卖房</text>
		   </view>
		   <view>
		
		
			   
			
		   			
		   			
		   		</view>
		<view class="block_view margin_t20 "></view>
		<view  class="handdatail-last "><view  class="handdatail-last-content">此页面房源所有数据仅供参考，购房时请以政府部门登记备案为准，请谨慎核查。</view></view>
	<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<view class="page-bottom-bth-wrapper">
				<navigator
					url="/pages/index/index"
					open-type="switchTab"
					class="p-b-btn">
					<i class="iconfont iconzhuyedefuben"></i>
					<text>首页</text>
				</navigator>
				<view class="p-b-btn" @tap="toFavorite">
					<view class="iconfont" :class="[ favorite ? `text-${themeColor.name} iconshixin1` : 'iconguanzhu']"></view>
					<text>收藏</text>
				</view>
				<view  class="p-b-btn" @tap="onShare">
					<i class="iconfont iconfenxiang"></i>
					<text>分享</text>
				</view>
				
				
			</view>
			<view class="action-btn-group" >
				
				
				<button
					
					class="action-btn-submit"
					:class="'bg-' + themeColor.name"
					@tap="buttonClick(1)"
				>
					电话咨询
				</button>
			</view>
			
	
		
 <!--回到顶部-->
		<rf-back-top :scrollTop="scrollTop"></rf-back-top>
		

		<view style="height: 50px"></view>
		<!-- 验证码弹窗 -->
		<uni-popup ref="showpopup" type="center" @change="change" class=" white-box pop-box" >
			<view class="inner">
				<view class="ttl">预约看房</view>
				
				<view class="inp-box">
				
					<view class="inn">
						<input type="number" v-model="phone" placeholder="请输入手机号码" />
					
					</view>
				</view>
				<view class="count" >
					
					<button  @click="yuyueCreate()" class="resend" :style="{ background: themeColor.color }">提交</button>
				</view>
			
				<view class="close" @click="closeBtn()">
					<image :src="$IMG_URL +'/images/close.svg'"></image>
				</view>
			</view>
		</uni-popup> 
		
	<!-- 	分享组件 -->
	<aijiacms-share v-model="showShare" :posterInfo="formData" :posterType="'sale'"></aijiacms-share>
	</view>
	
	</view>
		<!--加载动画-->
		<rfLoading isFullScreen :active="loading"></rfLoading>
	</view>
</template>

<script>
import {noticeDetail} from '@/api/sms';
import mapjs from '@/common/openMap.js'
import dayjs from '@/common/dayjs';
import rfBackTop from '@/components/rf-back-top';

import sale from '@/components/aj-list/sale.vue';
import {
	saleList,saleDetail,yuYue,addbrowserecord
} from '@/api/equipment.js';
import { collectCreate, collectDel, hasAttention } from '@/api/basic';
import rfNoData from '@/components/rf-no-data';
import share from '@/aijiacms/share';
export default {
	components: {
		sale,
		rfNoData
	
		
	},
	data() {
		return {
			showMap:false,
			imagesArr: [],
			saleList: [],
			formData: {},
			scrollTop: 0,
			phone: '',
			//20230310
			showShare: false,
			id: undefined,
			loading: true,
			favorite:false,
			navDetailShow: false,
			
			 goods_video_is_autoplay: true,
			appName: this.$mSettingConfig.appName,
			formTitle	: [
				{text: '询底价'},
				{text: '咨询优惠'},
				{text: '小区周边规划解析'},
				{text: '预约看房'}
				],
			options1	: [{
				icon: 'info',
				text: '举报'
			},{
				icon: 'star',
				text: '收藏'
			}],
			options2: [{
				icon: 'info',
				text: '举报'
			},{
				icon: 'star-filled',
				color:'#ffa200',
				text: '收藏'
			}],
			buttonGroup: [
				{
					text: '预约看房',
					backgroundColor: '#FF6D4A',
					color: '#fff'
				},
				{
					text: '电话咨询',
					backgroundColor: '#f2304a',
					color: '#fff'
				}
			],
			location: {
				longitude: 106.127349,
				latitude: 30.839814
			},
			controls: [{
				id: 1,
				position: {
					left: 5,
					top: 180,
					width: 30,
					height: 30
				},
				iconPath: '',
				clickable: true
			}],
			showLocation: false,
			scale: 13,
			showCompass: true,
			enable3D: true,
			enableOverlooking: true,
			enableZoom: true,
			enableScroll: true,
			enableRotate: true,
			enableSatellite: false,
			enableTraffic: false,
			//20232010
			villageCity: {
				areaid: 0,
				name: '全国'
			},
			errorInfo: '',
			polyline: [],
			markers: [],
			polygons: [],
			circles: [],
			includePoints: [],
			rotate: 0,
			skew: 0,
			markersData:[{
				id: 0,
				latitude: 30.839814,
				longitude: 106.127349,
				title: '',
				zIndex: '1',
				iconPath: this.$mConfig.static_url +'/images/gps.png',
				width: 30,
				height: 30,
				anchor: {
					x: 0.5,
					y: 1
				}
			}]
		};
	},
	// #ifndef MP
	onNavigationBarButtonTap(e) {
		const index = e.index;
		if (index === 0) {
			this.navDetailShow = true;
		}
	},
	// #endif
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	filters: {
		// 时间格式化
		time(val) {
			return dayjs(val).format('YYYY-MM-DD HH:mm');
		},
		timeFormat(val){
			if(val && val.length > 10){
				val = val.substr(5,11)
			}
			return val;
		},
		formatNum(val){
			if(val){
				return val.toFixed(0);
			}
			return val;
		},
		regionFormat(val){
			if(val && val.lastIndexOf("-") > -1){
				return val.substring(val.lastIndexOf("-")+1);
			}
			return val;
		}
	},
	async onLoad(options) {
		this.id = options.id;
		this.location.longitude = options.longitude;
		this.location.latitude = options.latitude;
		this.showMap = true;
		await this.getDetail(options.id);
		this.favorite = await this.hasAttention();
	},
	onShow() {
		let villageCity = uni.getStorageSync('villageCity');
	
		if (villageCity && this.villageCity.areaid != villageCity.areaid) {
			this.villageCity = villageCity;
			
			
		}
	},
	onShareAppMessage(res) {
		
		return { 
			title: this.formData.title,
			//desc: this.formData.housename,
			image: this.formData.thumb,
			path:'/pages/sale/detail?id='+this.formData.id,
		};
	},
	
	onReady() {
		 this.map = uni.createMapContext("map1", this);
		 if (this.video) {
		 	this.videoContext = uni.createVideoContext('myVideo');
		 }
	},
	//20230403
	onUnload() {
		share.setShareInfo();
	},
	methods: {
		//20230207
		// 分享
		onShare() {
			this.showShare = true;
		},
		//20230207
		// 通用跳转
		navTo(route) {
			this.$mRouter.push({ route });
		},
		// 路由跳转
		jump(path, parmas) {
			this.showShare = false;
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		// 验证码
		clickBtn() {
			 this.$refs.showpopup.open()
			 },
		yuyue() {
			 this.$refs.showpopup.open()
			 },
		closeBtn() {
		    this.$refs.showpopup.close();
		},
		change(e) {
			console.log('是否打开:' + e.show);
		},
		
		// 预约房源
		async yuyueCreate() {
			if (!this.phone) {
				uni.showToast({
					icon: 'none',
					title: '请输入手机号'
				})
				return false;
			}
			
			let params = {
				id: this.formData.id,
				type:'9',
				image:this.formData.url,
				mobile: this.phone,
				client_value: this.$mConstDataConfig.application_client_type(),
				userid:uni.getStorageSync('userInfo').id,
				title:'二手房'+' ' + this.formData.title,
				navUrl:'/pages/sale/detail?id='+this.formData.id
			}
			await this.$http .get(`${yuYue}`, {params:params})
			.then(async res => {
				this.favorite = true;
				this.$mHelper.toast('预约成功');
				this.$refs.showpopup.close()//关闭弹出层
			});
		},
		
		
		//预览图片
		previewImg(img,imgList){
			   console.log('imgList', imgList)
			// 预览图片
			uni.previewImage({
				current: img,
				urls: imgList,
				indicator: "default",
			});
		},
		
		
		
		
		
		// 收藏
		async toFavorite() {
			if (!this.formData.id) return;
			if (!this.$mStore.getters.hasLogin) {
				await this.$mHelper.backToLogin();
			} else {
				let favorite = await this.hasAttention()
				favorite ? this.handleCollectDel() : this.handleCollectCreate();
			}
		},
		// 查询收藏结果
		async hasAttention() {
			return await this.$http .get(`${hasAttention}`, {params:{id: this.formData.id,mid:'5',userid:uni.getStorageSync('userInfo').id}});
		},
		// 收藏
		async handleCollectCreate() {
			let params = {
				id: this.formData.id,
				mid:'5',
				image:this.formData.url,
				title:'二手房'+this.formData.title,
				client_value: this.$mConstDataConfig.application_client_type(),
				userid:uni.getStorageSync('userInfo').userid,
				navUrl:'/pages/sale/detail?id='+this.formData.id
			}
			await this.$http.get(`${collectCreate}`, {params:params}).then(async res => {
				this.favorite = true;
				this.$mHelper.toast('收藏成功');
			});
		},
		
			//20230607
			//浏览记录
			async addbrowserecord() {
				
				let params = {
					id: this.formData.id,
					mid:'5',
					
					title:'二手房'+this.formData.title,
					client_value: this.$mConstDataConfig.application_client_type(),
					username:uni.getStorageSync('userInfo').username,
					
					navUrl:'/pages/sale/detail?id='+this.id
				}
				
				await this.$http.get(`${addbrowserecord}`, {params:params}).then(async res => {
					this.favorite = true;
					
				});	
				
			},
		
		
		// 取消收藏
		async handleCollectDel() {
			let _this = this;
			
			await this.$http.get(`${collectDel}`, {params:{id: this.formData.id,mid:'5',userid:uni.getStorageSync('userInfo').userid}}).then(async res => {
				this.favorite = false;
				this.$mHelper.toast('取消收藏');
			});
		},
		//20230313
		openLocation() {
			if (!this.formData.map) {
				this.qqmapsdk.geocoder({
					region: this.formData.city,
					address:this.formData.address,
					success(res) {
						this.formData.latitude = res.result.location.lat;
						this.formData.longitude = res.result.location.lng;
					}
				});
			}
		
			uni.openLocation({
				latitude: Number.parseFloat(this.formData.latitude),
				longitude: Number.parseFloat(this.formData.longitude),
				name: this.formData.location,
				address: this.formData.address,
				success() {
		
				}
			});
		},
		openMap(){
			var options = {
				/* origin:{  //导航起点坐标和名称,如果不传则起点为当前位置
					latitude:39.92848272,
					longitude:116.39560823,
					name:"起点"
				}, */
				destination:{  //导航终点点坐标和名称
					latitude:this.location.latitude,
					longitude:this.location.longitude,
					name:"终点"
				},
				mode:"drive"  //导航方式 公交：bus驾车：drive（默认）,步行：walk,骑行：bike
			}
			mapjs.openMap(options,"gcj02")
		},
		// 隐藏顶部导航
		hideNavDetail() {
			this.navDetailShow = false;
		},
		
		//20221005
		async getSaleList() {
			let queryParams = {
				villageCity:this.villageCity.areaid,
				pagesize: 3
			}
			await this.$http .get(`${saleList}`, {params:queryParams})
			
				
				.then(async r => {
					this.saleList = r.list;
				})
				.catch(err => {
					this.errorInfo = err;
				});
		},
		
		// 获取示例详情
		async getDetail(id) {
			let queryParams = {
				
				id:id
			}
			let gps = uni.getStorageSync("gps");
			console.log("获取的GPS位置信息为："+JSON.stringify(gps));
			queryParams.longitude = gps.lng;
			queryParams.latitude = gps.lat;
			let res =await this.$http .get(`${saleDetail}`, {params:queryParams})
		
			await this.getSaleList();
			
			this.loading = false;
			if (res.title) {
				uni.setNavigationBarTitle({
					title: res.title
				});
			}
			this.formData = res;
			if (this.formData.images) {
				this.imagesArr = this.formData.images.split("|");
			}
			this.location.longitude = res.longitude;
			this.location.latitude = res.latitude;
			await this.addbrowserecord();
			//marker
			this.markersData[0].longitude = res.longitude;
			this.markersData[0].latitude = res.latitude;
			this.markers = this.markersData;
			this.showMap = true;
			share.setShareInfo({
				title: this.formData.title,
				desc: this.formData.title,
				image: this.formData.thumb,
				copyLink:'/pages/house/detail?id='+this.formData.id,
				params: {
					page: 2,
					pageId: this.id
				}
				
			});
			
			
		},
		onClick(e) {
			if (e.index === 0) {
				this.$mRouter.push({route: '/pages/set/feedback/feedback'});
			} else {
				this.toFavorite()
			}
		},
		buttonClick(e) {
					let _this = this;
				
					uni.showModal({
						title: '提示',
						content: '点击拨打，立即联系：' + this.formData.telephone,
						confirmText: '拨打',
						success: async function (res) {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: _this.formData.telephone,
									success: () => {
										console.log("成功拨打电话")
									}
								})
							}
						}
					});
					
				}
			}
		};
</script>

<style lang="scss">
.container {
	background: #fff;

	.carousel {
		height: 500upx;
		position: relative;

		swiper {
			width: 750upx;
			height: 500upx;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 500upx;
			overflow: hidden;
			border-bottom: 1upx solid rgba(0, 0, 0, 0.01);

			image {
				width: 100%;
				height: 100%;
			}

			.content {
				position: absolute;
				right: $spacing-base;
				bottom: $spacing-base;
			}
		}
	}

	.banner {
		overflow: hidden;
		position: relative;
		background-color: #fff;

		.banner-img {
			height: 300upx;
			width: 100%;
		}

		.banner-title {
			max-height: 84upx;
			overflow: hidden;
			position: absolute;
			bottom: 0;
			width: 100%;
			font-size: 32upx;
			line-height: 42upx;
			color: white;
			z-index: 11;
			background-color: rgba(0, 0, 0, 0.25);
			padding: 4upx 20upx;
		}
	}

	.field-title {
		color: #999;
	}

	.line {
		padding-bottom: 10px;
	}

	.banner-title {
		padding: $spacing-lg $spacing-lg 0;
		font-size: $font-lg;
		font-weight: bold;
	}

	.detail-meta {
		padding: 20upx 30upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		color: gray;

		.article-text {
			font-size: 26upx;
			line-height: 50upx;
			margin: 0 20upx;
		}

		.article-author,
		.field-time {
			font-size: 30upx;
		}
	}

	.article-content {
		padding: 0 30upx;
		overflow: hidden;
		font-size: 30upx;
		margin-bottom: 30upx;
	}
	//20220929
	.map {
		width: 100%;
		height: 187px;
		background-color: #f0f0f0;
	}
	.handdatail-info {
	    width: 348px;
	    margin: auto;
	      margin-top: auto;
	      margin-right: auto;
	      margin-bottom: auto;
	      margin-left: auto;
	    margin-top: 20px;
		display: block;
	  
	   .handdatail-info-name {
	       width: 348px;
	       margin-bottom: 20px;
		   
		  .handdatail-info-name-title {
			width: 100%;
			padding-right: 35px;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			box-sizing: border-box;
			position: relative;
			font-size: 21px;
			font-weight: 700;
			color: #1e1e1e;
			line-height: 27px;
		  } 
		   .add_block {
		    position: absolute;
		    right: 0;
		    top: 2px;
		  }
		  
		   
	    }
		
		.handdatail-info-other {
		  width: 348px;
		  height: 35px;
		  margin: auto;
		    margin-bottom: auto;
		  margin-bottom: 29px;
		  
		  .handdatail-info-other-a {
		      width: 111px;
		      height: 45px;
			  .handdatail-info-other-a-top {
			    height: 28px;
			    line-height: 28px;
			    text-align: center;
			    font-size: 20px;
			    font-weight: 700;
			    color: #ee4e38;
			  }
		  }
		}
	  
	}
	
	.goodCore .coreTxt {
	    font-size: 15px;
	    white-space: pre-wrap;
	}
	.goodCore .coreTit {
	    font-weight: 700;
	    font-size: 16px;
	    margin-bottom: 7px;
	}
	.newhousedetails-nearconfig-address {
	    font-size: 15px;
	    color: #303030;
	    line-height: 20px;
	}
	.f_right {
	  float: right;
	}
	.f_left {
	  float: left;
	}
	.handdatail-info-more {
	  width: 348px;
	  margin: auto;
	}
	.handdatail-info-more-a {
	  width: 167px;
	  height: 34px;
	}
	
	.handdatail-info-more-a-left {
	  width: 45px;
	  height: 34px;
	  line-height: 34px;
	  text-align: left;
	  font-size: 15px;
	  font-weight: 400;
	  color: #9d9d9d;
	}
	
	.handdatail-info-more-a-right {
		padding-right: 5px;
		box-sizing: border-box;
	  height: 34px;
	  line-height: 34px;
	  text-align: right;
	  font-size: 15px;
	  font-weight: 400;
	  color: #000;
	}
	 .skeleton-rect{
	  width: 348px;
	  color: rgb(92, 144, 210);
	  font-size: 14px;
	  margin: 20px auto;
	  text-align: center;
	}
	.margin_auto {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	.margin_auto {
	  margin: auto;
	}
	
	.diy-btn {
	  width: 348px;
		background: #E9EFFF;
		background-color: rgb(255, 239, 229);
		border-radius: 4px;
	  height: 40px;
	  line-height: 40px;
	  text-align: center;
	  font-size: 15px;
	  font-weight: 700;
	  color: #f2304a;
	}
	.bid-btn {
	      background: #fdf5f0;
	      color: #333;
	      height: 52px;
	      line-height: 52px;
	  }
	.UspriBtn {
	    color: #f2304a;
	    margin-left: 15px;
	    border: 1px solid;
	    line-height: 33px;
	    padding: 0 7px;
	    border-radius: 5px;
		font-size: 15px;
	}
	.margin_t20 {
	  margin-top: 20px;
	}
	.block_view {
	  background-color: #f4f4f4;
	  height: 10px;
	  width: 100%;
	}
	//经纪人
	.handdatail-manager {
	  width: 348px;
	  margin: auto;
	    margin-top: auto;
	  margin-top: 20px;
	}
	.handdatail-info-other-a-bottom {
	    height: 17px;
	    line-height: 17px;
	    text-align: center;
	    font-size: 13px;
	    font-weight: 700;
	    color: #9d9d9d;
	}
	.sheen-title {
	  height: 28px;
	  width: 100%;
	}
	.sheen-title-left {
	  font-size: 20px;
	  font-family: PingFangSC-Medium;
	  font-weight: 700;
	  color: #1e1e1e;
	  line-height: 28px;
	}
	.sheen-title-right {
	  width: 14px;
	  height: 28px;
	  position: relative;
	}
	.sheen-title-center {
	  font-size: 12px;
	  font-family: PingFangSC-Medium;
	  font-weight: 700;
	  color: #abafb8;
	  line-height: 28px;
	  text-align: right;
	}
	.handdatail-manager-card {
	  width: 348px;
	  padding: 15px 0 5px 0;
	}
	.handdatail-manager-card-top {
	  display: flex;
	  align-items: center;
	}
	.handdatail-manager-card-top-a {
	  width: 40px;
	  height: 40px;
	  border-radius: 50%;
	}
	uni-image {
	  will-change: transform;
	}
	.handdatail-manager-card-top-b {
	  flex: 1;
	
	  line-height: 40px;
	  max-width: 218px;
	  margin-left: 10px;
	  .handdatail-manager-card-top-bt {
	    height: auto;
	    line-height: 22px;
	    text-align: left;
	    font-size: 17px;
	    font-weight: 700;
	    color: #1e1e1e;
	  }
	  .handdatail-manager-card-bottom {
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    font-weight: inherit;
	    font-size: 13px;
	    color: #ccc;
	    margin-left: 0;
	    margin-top: 5px;
	  }
	  .handdatail-manager-card-top-a-text {
	    width: 35px;
	    height: 35px;
	    border-radius: 50%;
	    text-align: center;
	    line-height: 35px;
	    font-size: 17px;
	  }
	  .hand-icon {
	    font-size: 17px;
	    font-weight: 400;
	  }
	  .iconfont {
	    font-family: iconfont !important;
	    font-size: 16px;
	    font-style: normal;
	    -webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscale;
	  }
	  
	  .goodCore{
	    margin-bottom: 20px;
		.coreTxt {
		  font-size: 15px;
		  white-space: pre-wrap;
		}
	  }
	 
	}
	
	
	//买房提交
	.handdatail-builtinfo {
	  padding-top: 20px;
	  box-sizing: border-box;
	  width: 348px;
	  margin: auto;
	}
	.sell-house {
	  text-align: center;
	}
	.sell-house-title {
	  font-size: 20px;
	  font-family: PingFangSC-Medium;
	  font-weight: 700;
	  color: #1e1e1e;
	  line-height: 28px;
	}
	.sell-house-msg {
	  margin: 7px 0 15px 0;
	  font-size: 14px;
	  color: #999;
	}
	.sell-house-btn {
	  color: #f2304a;
	  font-weight: 700;
	  font-size: 15px;
	  border: 1px solid;
	  padding: 4px 15px;
	}
	//底部介绍
	.handdatail-last {
	  width: 375px;
	  padding: 20px;
	  box-sizing: border-box;
	}
	.handdatail-last-content {
	  font-size: 13px;
	  color: #b8b8b8;
	  line-height: 17px;
	}
	.map {
		width: 100%;
		height: 200px;
		background-color: #f0f0f0;
	}
	

	/* 验证码弹窗 */
	.white-box {
		margin: 0 20upx 60upx;
		padding: 30upx 30upx;
		border-radius: 14upx;
		background-color: #fff;
	}
	.white-box .inp-box {
		padding: 10upx 10upx;
		display: flex;
		flex-direction: column;
		border-bottom: 2upx solid #E5E5E5;
	}
	.white-box .inp-box:last-child {
		margin-bottom: 0;
	}
	.white-box .inp-box .name {
		margin-bottom: 10upx;
		font-size: 28upx;
		color: #666;
	}
	.white-box .inp-box input {
		color: #333;
		font-size: 30upx;
	}
	.white-box .inp-box .pla {
		color: #7E869E;
	}
	
	.pop-box .inner {
		padding: 30upx;
		width: 100%;
		position: relative;
		border-radius: 14upx;
		box-sizing: border-box;
		background-color: #fff;
	}
	.pop-box .ttl {
		margin-bottom: 30upx;
		color: #141414;
		font-size: 36upx;
		font-weight: bold;
		text-align: center;
	}
	.pop-box .text {
		padding: 20upx 0;
		font-size: 30upx;
		color: #666;
		text-align: center;
	}
	.pop-box .enter-box {
		margin-bottom: 50upx;
		display: flex;
		flex-direction: column;
		position: relative;
	}
	.pop-box .code {
		display: flex;
		justify-content: space-between;
	}
	.pop-box .code text {
		width: 70upx;
		height: 48upx;
		line-height: 48upx;
		border-bottom: 6upx solid #F0F0F0;
		text-align: center;
		color: #141414;
		font-size: 32upx;
	}
	.pop-box .code text.focus {
		border-color: #fff;
	}
	.pop-box .input {
		position: absolute;
		width: 100%;
		height: 48upx;
		left: 0;
		top: 0;
		opacity: 0;
	}
	/* 实际input高度 必须 > 显示input高度 */
	.pop-box .input input {
		width: 100%;
		height: 60upx;
		outline: none;
		border: none;
		background: none;
	}
	.pop-box .count button {
		color: #fff;
		margin-top: 30upx;
		font-size: 32upx;
		height: 70upx;
		line-height: 70upx;
		border-radius: 8upx;
		//background-color: #e64340;
	}
	.pop-box .count button::after {
		display: none;
	}
	.pop-box .count .resend {
		color: #fff;
	}
	.pop-box .close {
		padding: 10upx;
		position: absolute;
		right: 10upx;
		top: 10upx;
	}
	.pop-box .close image {
		width: 48upx;
		height: 48upx;
	}
	
	
}
</style>
